<template>
	<div class="balanceWater_box">
		<!-- <my-header :showBack="true" title="交易大厅"  :showRight="true"  @rightAction="showPeopleProp" rightText="我的"  ></my-header> -->
		<div class="ass_top">
			<div class="head_top">
				<div>
					<i class="iconfont icon-caidan1 menu" @click="showProp"></i>
				</div>
				<div>{{$t("lang.Guctrading")}}</div>
				<!-- <div class="rightmenu">
					<i class="iconfont " @click="pushPath('/stockRights')">{{$t("lang.Bill")}}</i>
				</div> -->
		<!-- <div @click="showMenu">
          <i class="iconfont icon-more1"    style="font-size: 20px;"></i>
        </div> -->
		<div @click="pushPath('/gucRights')">
		  <span  style="font-size: 15px;">{{$t("lang.Bill")}}</span>
        </div>

		
			</div>
			<div class="all_ass">
				<h3>{{JifenNum||"0.00"}}</h3>
				<p>{{$t("lang.UseCUC")}}</p>
			</div>
		</div>
		<!-- 02 -->
		<div class="asflex">
			<div>
				<h4>{{DQNum||"0.00"}}</h4>
				<p>{{$t("lang.FixedCUC")}}</p>
			</div>
			<!-- <div>
				<h4>{{PSNum||"0.00"}}</h4>
				<p>{{$t("lang.DeliveryCUC")}}</p>
			</div> -->
		</div>
		<!-- 交易输入框 -->
		<section class="">
			<div class="personal_info"> 
				<van-cell-group>
					<van-field v-model="sellgrade" :label="$t('lang.Withdrawquantity')" :placeholder="$t('lang.enterSNum')" clearable/>
					<van-field v-model="Walletaddress" :label="$t('lang.WalletAddress')" :placeholder="$t('lang.WalletAddress')" clearable/>
					<van-field v-model="payPass" :label="$t('lang.scccPword')" :placeholder="$t('lang.enterSpword')" type="password" clearable />
				</van-cell-group>
			</div>
			<div class="center_btn">
				<van-button type="primary" size="large" @click="confirm">{{$t("lang.ConfirmBtns")}}</van-button>
			</div>
		</section>
		<!-- <div class="marktitle">
			<h3>{{$t("lang.orderhistory")}}</h3>
		</div> -->
		<!--
			v-show="StockList.length>0"          如果列表的长度>0,显示列表
			v-model="loading"                    是否处于加载状态，加载过程中不触发load事件
			:finished="finished"                 是否已加载完成，加载完成后不再触发load事件
			:offset="300"                        滚动条与底部距离小于 offset 时触发load事件 默认300
			@load="loadMore"                     滚动条与底部距离小于 offset 时触发
		-->
		<!-- <van-list v-show="StockList.length>0" v-model="loading" :finished="finished" @load="loadMore" :offset="100">
			<ul class="trad_list">
				<li v-for="item in StockList" :key="item.index">
					<div class="nflex npadd">
						<h4 data-id="item.id">{{$t("lang.orderNum")}}：{{item.tradeSerial}}</h4>

						<p class="buybtn" v-if="item.tradeStatus==1">{{$t("lang.Fortrading")}}</p>
						<p class="buybtn" v-else="item.tradeStatus==5">{{$t("lang.transactionend")}}</p>
					</div>
					<div class="nborder">
						<div class="nflex ">
							<p>{{$t("lang.Sellquantity")}}</p>
							<p>{{item.tradeAmount}}</p>
						</div>
			
					</div>

				</li>
			</ul>
		</van-list> -->
		<div v-if="StockList.length==0" class="no_data">
			<img src="../../assets/img/my/nodata.png" alt="" srcset="">
			<span>{{$t("lang.NoData")}}</span>
		</div>
		<!-- 左侧侧滑菜单 -->
		<van-popup v-model="showLeftProp" position="left" :overlay="true" class="leftprop_box">
			<right-menu></right-menu>
		</van-popup>
		<van-popup v-model="showMenuProp" position="top" :overlay="true" class="showmenu">
      <div class="test_triangle_border">
          <div class="popup">
               <span><em></em></span>
              <ul>
				<li  @click="pushPath('/gucRights')">{{$t("lang.Bill")}}</li>
                <!-- <li @click="pushPath('/theTransactions')">{{$t("lang.ransactionQuery")}}</li> -->
              </ul>
          </div>
      </div>
    </van-popup>
	</div>
</template>

<script>
	import header from '@/components/header'
	import timeFormat from '../../store/timeFormat';
	import chart from "@/components/chart.vue";
	import { Toast } from 'vant';
	import RightMenu from "./RightMenu.vue";
	export default {
		components: {
			'my-header': header,
			"tfc-chart": chart,
			"right-menu": RightMenu,
		},
		data() {
			return {
				selected: "income",
				searchData: { //分页属性  
					pageNo: 1, //当前页
					pageSize: 3, //每页20条
					//type: 1,
					//status: 1
				},
				//获取到的数据列表
				StockList: [],
				//是否处于加载状态，加载过程中不触发load事件
				loading: false,
				//是否已加载完成，加载完成后不再触发load事件
				finished: false,
				
				showLeftProp: false,
				incomeTotal: 0,
				newsList: [],
				disabledInput: false,
				DayNum: "",
				shizhi: "",
				sellgrade: "",
				Walletaddress: "",
				ltjf: "0.00",
				payPass: "",
				JifenNum: "",
				DQNum: "",
				PSNum: "",
				showMenuProp:false
			}
		},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return timeFormat.formatDate(date, "yyyy-MM-dd hh:mm:ss");
			},
		},
		mounted() {
			this.$store.commit("updateSelected", 2);
			this.$store.commit("updateNeedShowFooter", true);
			this.selectAccount();
			this.selectMarket();
		},
		created() {
			this.selectMyStockList();
		},
		watch: {
			sellgrade() {
		
				
				this.ltjf = parseFloat(Number(this.DayNum) * Number(this.sellgrade)) * Number(0.75).toFixed(4);
			}
		},
		// computed(){

		// }
		methods: {
			selectMarket() {
				//今日市值
				this.$ajax(this.$api.selectMarket).then(res => {
					if(res.code == 0) {
						this.marketValue = res.msg;
						this.DayNum = res.msg.dollarRate;
						this.shizhi = "$" + this.DayNum;
					}
				})
			},
			showMenu(){
      	this.showMenuProp=true;
    	},
			showProp() {
				this.showLeftProp = true;
				console.log(1001);
			},
			closeProp() {
				this.showLeftProp = false;
			},
			selectMyStockList() {
				this.$ajax(this.$api.selectMyStockList, this.searchData).then(res => {
					if(res.code === 0 && res.msg) {
            this.StockList = res.msg.list;
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
            console.log(this.StockList);
            console.log(this.finished);

					}
				});
			},
			loadMore() {
				console.log("开始获取更多数据");
				
				this.searchData.pageNo += 1;
				this.$ajax(this.$api.selectMyStockList, this.searchData).then(res => {
					// this.loading = false;
					if(res.code === 0) {
						if(res.msg && res.msg.list.length > 0) {
							this.StockList = this.StockList.concat(res.msg.list);
							this.finished = this.searchData.pageNo == res.msg.lastPage;
							this.loading = false;
						}
					}
				});
			},
			confirm() {
				// 卖出
				if(this.sellgrade == '' || this.sellgrade < 0) {
					Toast({
						message: this.$t('lang.EnterTrueNum'),
						position: "bottom"
					});
					return;
				}
				var numReg = /^[0-9]+$/
				var numRe = new RegExp(numReg)
				if (!numRe.test(this.sellgrade)) {
					Toast({
							message: this.$t('lang.EnterTrueNum'),
							position: "bottom"
						});
						return;
				
				}
				if(this.payPass == '') {
					Toast({
						message: this.$t('lang.enterSpword'),
						position: "bottom"
					});
					return;
				}
				if(!this.$validator.isPassword(this.payPass)) {
					Toast({
						message: this.$t('lang.truepayPass'),
						position: "bottom"
					});
					return;
				}
				this.$ajax(this.$api.withdrawGuc, {
					amount: this.sellgrade,
					payPass: this.payPass,
					Walletaddress: this.Walletaddress,
					type: 1
				}).then(res => {
					if(res.code === 0 && res.msg) {
						Toast({
							message: res.msg,
							position: "bottom"
						});
						this.sellgrade = "";
						this.payPass = "";
						this.selectAccount();
					} else {
						Toast({
							message: res.msg,
							position: "bottom"
						});
						return
					}
				});
			},
			getIntData(item) {
				const buyId = item.id;
				this.$ajax(this.$api.matchTrade, {
					id: buyId
				}).then(res => {
					if(res.code === 0 && res.msg) {
						Toast({
							message: res.msg,
							position: "bottom"
						});
						console.log(this.StockList);
					} else {
						Toast({
							message: res.msg,
							position: "bottom"
						});
						return
					}
				});
			},
			selectAccount() {
				// 个人资产
				this.$ajax(this.$api.selectAccount).then(
					res => {
						if(res.code == 0) {
							// 可用股权
							this.JifenNum = res.msg.guc.toFixed(3);
							this.DQNum = res.msg.fixed_guc.toFixed(3);
							this.PSNum = res.msg.delivery_guc.toFixed(3);
						}
					}
				)
			},
			See(e) {
				window.location.href = e
			}
		}
	}
</script>

<style lang='less' scoped>
	.balanceWater_box {
		background: #ffffff;
		color: #999999;
	}
	
	.bottop {
		border-top: 1px solid #eeeeee;
		margin-bottom: 50px;
	}
	
	// head_top
	.head_top {
		width: 100%;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
		color: #ffffff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		background: transparent;
	}
	
	.head_top .menu {
		font-size: 20px;
	}
	
	.head_top i {
		padding: 10px;
		font-size: 14px;
	}
	
	.head_top div:nth-child(1) {
		width: 20%;
		box-sizing: border-box;
	}
	
	.head_top div:nth-child(2) {
		width: 60%;
		text-align: center;
	}
	
	.head_top div:nth-child(3) {
		width: 20%;
		text-align: center;
		font-size: 12px;
	}
	
	// .head_top + div {
	//   position: absolute;
	//   width: 100%;
	//   top: 44px;
	//   bottom: 0;
	//   overflow-y: auto;
	//   overflow-x: hidden;
	// }
	.top_jybg {
		background: linear-gradient(150deg, rgba(172, 6, 0, 1) 0%, rgba(135, 2, 0, 1) 100%);
		border-radius: 2px;
		height: 100px;
		color: #ffffff;
		padding-left: 15px;
		box-sizing: border-box;
		margin: 12px;
		h2 {
			font-weight: bold;
			font-size: 30px;
			padding-top: 15px;
		}
	}
	
	.trad_list {
		background: #f6f6f6;
		li {
			box-sizing: border-box;
			padding: 0 12px;
			background: #ffffff;
			margin-top: 10px;
			h4 {
				color: #333333;
			}
			.nflex {
				display: flex;
				justify-content: space-between;
			}
			.nborder {
				border-top: 1px solid #F6F6F6;
				border-bottom: 1px solid #F6F6F6;
				p {
					line-height: 26px;
					color: #999999;
				}
				p:nth-child(2) {
					color: #666666;
				}
			}
			.npadd {
				padding: 15px 0;
			}
			.buybtn {
				color: #FF4954;
				border: 1px solid #FF4954;
				border-radius: 20px;
				padding: 0 6px;
			}
		}
	}
	
	// prop层
	.showmenu {
		text-align: center;
		color: #333333;
		background: transparent;
		height: 200px;
		position: relative;
		li {
			height: 35px;
			line-height: 35px;
			border-bottom: 1px solid #eeeeee;
		}
		li:nth-child(2) {
			border-bottom: none;
		}
	}
	
	.test_triangle_border {
		width: 200px;
		margin: 0 auto 20px;
	}
	
	.test_triangle_border a {
		color: #333;
		font-weight: bold;
		text-decoration: none;
	}
	
	.test_triangle_border .popup {
		width: 120px;
		background: #ffffff;
		// padding:10px 20px; 
		color: #333;
		border-radius: 4px;
		position: absolute;
		top: 10px;
		right: 2vw;
		border: 1px solid #333;
	}
	
	.test_triangle_border .popup span {
		display: block;
		width: 0;
		height: 0;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #333;
		position: absolute;
		top: 10px;
		left: 70%;
		/* 三角形居中显示 */
		margin-left: -10px;
		/* 三角形居中显示 */
	}
	
	.test_triangle_border .popup em {
		display: block;
		width: 0;
		height: 0;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #ffffff;
		position: absolute;
		top: 1px;
		left: -10px;
	}
	
	//top
	.ass_top {
		background: url(../../assets/img/assetIndex/grzx_dhzx.png) 0 0 no-repeat
	}
	
	.all_ass {
		text-align: center;
		padding: 4vh 0;
		h3 {
			color: #E1AF56;
			font-size: 24px;
			line-height: 30px;
		}
		p {
			color: #AA7A24;
		}
	}
	
	.asflex {
		display: flex;
		justify-content: space-between;
		background: #720300;
		padding: 10px 0;
		div {
			width: 100%;
			text-align: center;
		}
		h4 {
			color: #E1AF56;
			font-size: 16px;
			line-height: 20px;
		}
		p {
			color: #AA7A24;
		}
	}
	
	.marktitle {
		border-bottom: 1px solid #eeeeee;
		padding: 12px 0;
		background: #ffffff;
		h3 {
			padding-left: 12px;
			color: #333333;
			box-sizing: border-box;
		}
	}
	
	// 交易输入框
	.center_btn {
		margin: 15px;
	}
	
	.center_btn .btn {
		width: 80%;
		background: #A00500;
		margin-top: 50px;
		margin-left: 10%;
		box-shadow: none;
		border-radius: 5px;
		color: #fff;
		font-size: 16px;
	}
	
	// leftmenu prop
	.leftprop_box {
		background: #ffffff;
		width: 80vw;
		height: 100%;
	}
	
	.leftprop_box h3 {
		padding-left: 14px;
		font-weight: 600;
	}
	
	.leftprop_title {
		height: 65px;
		line-height: 65px;
		border-bottom: 1px solid #eeeeee;
	}
	
	.homeleft_list li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		line-height: 50px;
		padding: 0 12px;
		color: #333333;
	}
	
	.homeleft_list li div {
		display: flex;
		align-items: center;
	}
	
	.homeleft_list li img {
		width: 25px;
		height: 25px;
	}
	
	.homeleft_list li p {
		padding-left: 10px;
	}
	
	.balanceWater_box.child-view {
    padding-bottom: 50px;
    position: relative;
	}
.showmenu{
  text-align: center;color: #333333;background:transparent;height: 200px;position: absolute;top:35px;right: 0;
  li{height: 35px;line-height: 35px;border-bottom: 1px solid #eeeeee;}
  li:nth-child(2){border-bottom: none;}
}
.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    
}
	.test_triangle_border .popup{
    width:120px;
    background:#ffffff; 
    // padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
		top:10px; 
    right:2vw;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:70%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #ffffff; 
    position:absolute; 
    top:1px; 
    left:-10px;
}
</style>